import React, { Component } from 'react';
import { Tabs, Ellipsis } from 'antd-mobile'
import { good_list, good_search, index_goodlist } from "../../utils/api";
import { withRouter } from 'react-router-dom'
class Goodlist extends Component {

    state = {
        goodslist: []
    }
    componentDidMount() {
        if (this.props.location.state && this.props.location.state.id) {
            good_list({ id: this.props.location.state.id }).then((res) => {
                this.setState({
                    goodslist: res.data.list
                })
            })
        } else if (this.props.location.state && this.props.location.state.taskname) {
            good_search({ searchkey: this.props.location.state.taskname }).then((res) => {
                if (res.data.code == 200) {
                    console.log(res);
                    this.setState({
                        goodslist: res.data.list
                    })
                }
            })
        } else {
            index_goodlist({ page: 1, count: 96 }).then((res) => {
                this.setState({
                    goodslist: res.data.list
                })
            })
        }
    }
    handleChange(id) {
        this.props.history.push({ pathname: '/detail', state: { id } })
    }
    render() {
        
        return (
            <Tabs style={{
                '--active-title-color': '#ed0021',
                '--active-line-color': '#ed0021'
            }}>
                <Tabs.Tab title='综合' key='zonghe'>
                    <div className="goodslist">
                        {
                            this.state.goodslist &&
                            this.state.goodslist.map((item, index) => {
                                return (
                                    <div className="goods" key={index} onClick={() => { this.handleChange(item.id) }}>
                                        <div className="img-box">
                                            <img src={item.pic} />
                                        </div>
                                        {/* <div className="name">{item.name}</div> */}
                                        <Ellipsis className="name" direction='end' rows={2} content={item.name} />
                                        <div className="sales">{item.salesPrice.name}</div>
                                        <div className="price">活动价￥<span>{parseInt(item.salesPrice.value)}</span></div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </Tabs.Tab>
                <Tabs.Tab title='销量' key='xiaoliang'>
                    销量
                </Tabs.Tab>
                <Tabs.Tab title='新品' key='xinping'>
                    新品
                </Tabs.Tab>
                <Tabs.Tab title='价格' key='price'>
                 sss
                </Tabs.Tab>
                <Tabs.Tab title='筛选' key='shaixuan'>
                    筛选
                </Tabs.Tab>
            </Tabs>
        );
    }
}

export default withRouter(Goodlist);